<template>
  <div class="app-container">
    <el-form
      class="searchForm" :inline="true" size="mini"
      ref="searchForm"
      :model="searchForm"
      label-width="70px" 
    >
    <el-form-item label="日志日期">
        <el-date-picker style="width:130px"
          v-model="searchForm.startDate"
          :append-to-body="false"
          :popper-append-to-body="false"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择日志日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="日志时间" class="log_times">
        <el-time-picker
          is-range style="width:180px"
          v-model="rangeTimes"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择日志时间"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="设备编码">
        <el-input clearable
          v-model="searchForm.equipCode"
          placeholder="请输入设备编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备id">
        <el-input clearable
          v-model="searchForm.equipId"
          placeholder="请输入设备id"
        ></el-input>
      </el-form-item>
      <el-form-item label="厂商编码">
        <el-input clearable
          v-model="searchForm.manufacturerCode"
          placeholder="请输入厂商编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="运营商">
        <el-input clearable
          v-model="searchForm.operatorName"
          placeholder="请输入运营商名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="流水号">
        <el-input clearable
          v-model="searchForm.txnNo"
          placeholder="请输入流水号"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="消息类型">
        <el-select clearable
          v-model="searchForm.messageTypeCodes"
          multiple
          placeholder="请选择消息类型"
        >
          <el-option
            v-for="item in enumsJson.COMMLOG_MESSAGE_TYPE"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区编码">
        <el-input clearable
          v-model="searchForm.regionCode"
          placeholder="请输入地区编码"
        ></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="doSearch"
          >搜索</el-button
        >
        <el-button
          type="default"
          size="mini"
          icon="el-icon-refresh"
          @click="resetSearch"
          >重置</el-button
        >
        <!-- <el-button type="text" @click="doAdvanced"
          >{{ advanced ? "收起" : "展开"
          }}<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i
        ></el-button> -->
      </el-form-item>
    </el-form>

    <Table
      :tableHeader="tableHeader"
      :tableData="tableData"
      :tableLoading="listLoading"
    >
      <template slot="action" slot-scope="scope">
        <el-button
          type="primary"
          size="mini"
          plain
          @click="addDialog(scope.row)"
          >查看</el-button
        >
      </template>
    </Table>
    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      :pageSizes="[16, 32, 40, 80, 100]"
      @pagination="fetchData"
    />

    <!-- 弹框 -->
    <Dialog
      :visible="visible"
      width="62%"
      title="详情信息"
      :isFooter="false"
      @cancelDialog="cancelDialog"
    >
      <el-descriptions :column="2" class="des-details">
        <el-descriptions-item label="设备编码">{{
          currentRow.equipCode
        }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{
          currentRow.topicTypeLabel
        }}</el-descriptions-item>
        <el-descriptions-item label="流水号">{{
          currentRow.txnNo
        }}</el-descriptions-item>
        <el-descriptions-item label="流水时间">{{
          formatterTime(currentRow.txnNo)
        }}</el-descriptions-item>
        <el-descriptions-item label="数据时间">{{
          currentRow.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="消息类型">{{
          currentRow.messageTypeLabel
        }}</el-descriptions-item>
        <el-descriptions-item label="topic">{{
          currentRow.topic
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="label-cont">内容:</div>
      <el-row>
        <el-col :span="11">
          <vue-json-editor
            style="height: 100%"
            v-model="currentRow.payload"
            :showBtns="false"
            mode="text"
          />
        </el-col>
        <el-col :span="11" :offset="1" class="jsonContent"
          ><vue-json-editor
            style="height: 100%"
            v-model="currentRow.transpayload"
            :showBtns="false"
            mode="text"
          />
        </el-col>
      </el-row>
    </Dialog>
  </div>
</template>

<script>
import { equipment } from "@/api/factuer";
import { semaphore } from "@/api/manage";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { removeNullUndefined } from "@/utils/index.js";
import moment from "moment";
import { mapState } from "vuex";
import vueJsonEditor from "vue-json-editor";

export default {
  components: { Pagination, Table, Dialog, vueJsonEditor },
  data() {
    return {
      listLoading: true,
      total: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 16,
        startDate: moment(new Date()).format("YYYY-MM-DD"),
        beginTime: "",
        endTime: "",
        equipCode: "",
        txnNo: "",
        messageTypeCodes: [],
        equipId: "",
        regionCode: "",
        operatorName: "",
        manufacturerCode: "",
      },

      rangeTimes: ["00:00:00", "23:59:59"],

      tableHeader: [
        {
          type: "index",
          label: "序号",
          width: "50",
          fixed: true,
        },
        {
          label: "设备id",
          prop: "equipId",
        },
        {
          label: "设备编码",
          prop: "equipCode",
          width:"60"
        },
        {
          label: "设备分类",
          prop: "equipType",
          width: "24",
          formatter: (item) => {
            let classify = this.enumsJson.EQUIP_CLASSIFY.find((p) => {
              return p.code == item.equipType;
            });
            return classify.label;
          },
        },
        {
          label: "消息类型",
          prop: "messageTypeLabel",
          width:"40"
        },
        {
          label: "流水号",
          prop: "txnNo",
          width:"42"
        },
        {
          label: "流水时间",
          prop: "txnNo",
          formatter: (item) => {
            return item.txnNo
              ? moment(Number(item.txnNo)).format("YYYY-MM-DD HH:mm:ss")
              : "";
          },
          width:"50"
        },
        {
          label: "数据时间",
          prop: "createTime",
          width:"50"
        },
        { slot: "action", label: "操作", width: "90" },
      ],
      tableData: [],
      visible: false, //弹框标识

      currentRow: {},
      samphoreList: [],
      advanced: false,
    };
  },
  computed: {
    ...mapState({
      enumsJson: (state) => state.enums.enums,
    }),
  },
  created() {
    this.fetchData();
    this.getSemaphore();
  },
  methods: {
    formatterTime(val) {
      return val ? moment(Number(val)).format("YYYY-MM-DD HH:mm:ss") : "";
    },
    fetchData(val) {
      if (!this.searchForm.startDate) {
        this.$message.warning("请选择日志时间");
        return;
      }
      if (!this.rangeTimes) {
        this.$message.warning("请选择日志日期");
        return;
      }
      this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
      this.searchForm.beginTime = this.rangeTimes[0];
      this.searchForm.endTime = this.rangeTimes[1];
      this.listLoading = true;
      this.tableData = [];
      this.total = 0;
      equipment(
        "/communication/list",
        "post",
        { ...removeNullUndefined(this.searchForm) },
        1
      )
        .then((res) => {
          this.tableData = res.data;
          this.total = +res.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    getSemaphore() {
      semaphore("/all", "post").then((res) => {
        this.samphoreList = res.data;
      });
    },

    // 弹框取消
    cancelDialog() {
      this.visible = false;
      this.currentRow = {};
    },

    // 新增
    async addDialog(row) {
      this.visible = true;
      this.currentRow = { ...row };
      this.currentRow.payload = JSON.parse(row.content);
      this.currentRow.transpayload = JSON.parse(row.content);
      switch (this.currentRow.transpayload.msgType) {
        case 300:
        case 301:
          this.currentRow.transpayload.eventList.forEach((item) => {
            this.samphoreList.forEach((pp) => {
              if (item.id == pp.code) {
                item.name = pp.name;
              }
            });
          });
          break;
        case 400:
        case 401:
          this.currentRow.transpayload.alarmList.forEach((item) => {
            this.samphoreList.forEach((pp) => {
              if (item.id == pp.code) {
                item.name = pp.name;
              }
            });
          });
          break;
        case 500:
        case 501:
          this.currentRow.transpayload.attrList.forEach((item) => {
            this.samphoreList.forEach((pp) => {
              if (item.id == pp.code) {
                item.name = pp.name;
              }
            });
          });
          break;
        case 200:
        case 201:
          this.currentRow.transpayload.paramList.forEach((item) => {
            this.samphoreList.forEach((pp) => {
              if (item.id == pp.code) {
                item.name = pp.name;
              }
            });
          });
          break;
        case 100:
          this.currentRow.transpayload.controlList.forEach((item) => {
            this.samphoreList.forEach((pp) => {
              if (item.id == pp.code) {
                item.name = pp.name;
              }
            });
          });
          break;
      }
    },

    resetSearch() {
      this.searchForm = {
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        startDate: moment(new Date()).format("YYYY-MM-DD"),
        beginTime: "",
        endTime: "",
        equipCode: "",
        txnNo: "",
        messageTypeCodes: [],
        equipId: "",
        regionCode: "",
        operatorName: "",
        manufacturerCode: "",
      };
      this.rangeTimes = ["00:00:00", "23:59:59"];
    },
    doSearch() {
      this.searchForm.pageNum = 1;
      this.fetchData();
    },
    // 展开折叠
    doAdvanced() {
      this.advanced = !this.advanced;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.searchForm{
  .el-form-item{
    margin-bottom:8px;
  }
  .el-input,.el-select{
    width: 130px;
  }
}

.filters {
  
  .el-form-item {
    width: 18%;
  }
  .search_btn {
    margin-left: 5px;
  }
}

.condition {
  @include flexLayout(center, flex-start);
  flex-wrap: wrap;
}

::v-deep .jsoneditor-vue {
  height: 500px;
}

::v-deep .el-descriptions-item__content {
  color: #000000;
  font-size: 16px;
}

.des-details {
  margin-left: 20px;
}

::v-deep .el-descriptions-item__label {
  width: 65px;
  justify-content: flex-end;
}

.label-cont {
  width: 85px;
  text-align: right;
  margin-bottom: 10px;
}

.el-icon-arrow-up {
  color: #409eff;
}
</style>
